import React from 'react';
import Container from 'components/Container'
import './index.scss'

function readerList(list){
    const cards = list.map(({ Comp, size={width:'100%', height: 200}, name}, i) => {
        return <div className="card-li" key={i} >
            <div className="card-thumbnail" style={{...size}}><Comp /></div>
            <div className="card-name">{name || Comp.name}</div>
        </div>
    })
    return <div className="card-ul">{cards}</div>
}


export default function AbnormalStyle() {

    const Comps = require.context('./abnormal', true, /\.(js|tsx|jsx)$/)
    const list = Comps.keys().map(key => {
        const { default: Comp, ...args } = Comps(key)
        return { Comp, ...args }
    }) 
    return <Container title="异常风格管理">
        <div className="AbnormalStyle">
            {readerList(list)}
        </div> 
    </Container>;
}
